<template>
  <el-form
    v-if="vFormSelectElem?.attrs"
    :model="vFormSelectElem?.attrs"
    style="padding: 2px;"
  >
    <el-form-item prop="title" label="标题">
      <el-input v-model="vFormSelectElem.attrs.title"></el-input>
    </el-form-item>
    <el-form-item prop="width" label="宽度">
      <el-input v-model="vFormSelectElem.attrs.width"></el-input>
    </el-form-item>
    <el-form-item prop="vModel" label="是否显示">
      <el-radio-group v-model="vFormSelectElem.attrs.vModel">
        <el-radio-button :value="true">是</el-radio-button>
        <el-radio-button :value="false">否</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="top" label="上边距">
      <el-input v-model="vFormSelectElem.attrs.top"></el-input>
    </el-form-item>
    <el-form-item prop="fullscreen" label="是否全屏">
      <el-radio-group v-model="vFormSelectElem.attrs.fullscreen">
        <el-radio-button :value="true">是</el-radio-button>
        <el-radio-button :value="false">否</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="showClose" label="是否显示关闭按钮">
      <el-radio-group v-model="vFormSelectElem.attrs.showClose">
        <el-radio-button :value="true">是</el-radio-button>
        <el-radio-button :value="false">否</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="modal" label="是否显示遮罩层">
      <el-radio-group v-model="vFormSelectElem.attrs.modal">
        <el-radio-button :value="true">是</el-radio-button>
        <el-radio-button :value="false">否</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="lockScroll" label="是否锁定滚动条">
      <el-radio-group v-model="vFormSelectElem.attrs.lockScroll">
        <el-radio-button :value="true">是</el-radio-button>
        <el-radio-button :value="false">否</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="closeOnClickModal" label="是否可以通过点击modal关闭Dialog">
      <el-radio-group v-model="vFormSelectElem.attrs.closeOnClickModal">
        <el-radio-button :value="true">是</el-radio-button>
        <el-radio-button :value="false">否</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="closeOnPressEscape" label="是否可以通过按下ESC关闭Dialog">
      <el-radio-group v-model="vFormSelectElem.attrs.closeOnPressEscape">
        <el-radio-button :value="true">是</el-radio-button>
        <el-radio-button :value="false">否</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="openDelay" label="延迟打开的时间(单位毫秒)">
      <el-input-number v-model="vFormSelectElem.attrs.openDelay" :min="1" :max="10000"  />
    </el-form-item>
    <el-form-item prop="closeDelay" label="延迟关闭的时间(单位毫秒)">
      <el-input-number v-model="vFormSelectElem.attrs.closeDelay" :min="1" :max="10000"  />
    </el-form-item>

    <el-form-item prop="draggable" label="是否可拖拽">
      <el-radio-group v-model="vFormSelectElem.attrs.draggable">
        <el-radio-button :value="true">是</el-radio-button>
        <el-radio-button :value="false">否</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="overflow" label="是否拖出可视区">
      <el-radio-group v-model="vFormSelectElem.attrs.overflow">
        <el-radio-button :value="true">是</el-radio-button>
        <el-radio-button :value="false">否</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="center" label="是否让对话框的头部和底部部分居中排列">
      <el-radio-group v-model="vFormSelectElem.attrs.center"  >
        <el-radio-button :value="true">是</el-radio-button>
        <el-radio-button :value="false">否</el-radio-button>
      </el-radio-group>
    </el-form-item>

   <el-form-item prop="alignCenter" label="是否让对话框体部分居中排列">
      <el-radio-group v-model="vFormSelectElem.attrs.alignCenter">
        <el-radio-button :value="true">是</el-radio-button>
        <el-radio-button :value="false">否</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="mode" label="模式">
      <el-checkbox-group v-model="mode" :min="0" :max="1">
        <el-checkbox-button value="design">设计</el-checkbox-button>
        <el-checkbox-button value="read">只读</el-checkbox-button>
        <el-checkbox-button value="edit">编辑</el-checkbox-button>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>

import {computed, inject, ref} from "vue";
import { vFormActiveElementKey } from "@/components/form/state.key";
const vFormSelectElem = inject(vFormActiveElementKey)
//console.log('inject vFormSelectElem', JSON.stringify(vFormSelectElem.value.attrs.operationdata.parameterList));
const mode = computed({
  get: () => vFormSelectElem.value.attrs.mode ? [vFormSelectElem.value.attrs.mode] : [],
  set: v => {
    if (v?.length) {
      vFormSelectElem.value.attrs.mode = v[0]
    } else {
      vFormSelectElem.value.attrs.mode = undefined
    }
  }
})

</script>

<style scoped>

</style>
